<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/simditor-2.3.6/styles/simditor.css" />
    <style>
        .header {
            height: 70px;
            background-color: #f8f8f8;
        }

        .header-left {
            width: 30%;
            line-height: 70px;
            text-align: center;
            float: left;
        }

        .header-center {
            width: 40%;
            height: 100%;
            line-height: 70px;
            text-align: center;
            float: left;
        }

        .header-right {
            width: 30%;
            float: left;
            line-height: 70px;
            text-align: center;
        }

        .gallery-text {
            color: black;
            text-decoration: none;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            font-size: 20px;
            letter-spacing: 2px;
        }

        .logo {
            margin-top: -10px;
        }

        .dropdown-menu {
            background-color: #f8f8f8;
        }

        .container {
            height: 800px;
            width: 100%;
            background: url("/images/bg.jpg") no-repeat;
            background-size: 100% 100%;
        }

        #carousel-example-generic {
            width: 60%;
            height: 500px;
            margin-left: 20%;
            border: solid #f8f8f8 2px;
        }

        .title-box {
            width: 60%;
            margin-top: 7%;
            margin-left: 20%;
            color: #000000;
            text-align: center;
        }

        .footer {
            height: 200px;
            background-color: #f8f8f8;
        }

        #about {
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }

        #link {
            width: 50%;
            height: 150px;
            float: left;
            text-align: center;
        }

        #link ul {
            text-align: left;
            margin-left: 20%;
        }

        #link ul li {
            list-style: none;
        }

        .copy-right {
            line-height: 50px;
            text-align: center;
        }

        #container {
            width: 100%;
            height: 700px;
            background: url("/images/user_center_bg.jpg");
            background-size: 100% 100%;
            border: solid #f8f8f8 2px;
            margin: 0 0;
        }

        .carousel.slide {
            height: 200px;
            width: 20%;
            margin: 2% 2%;
            float: left;
        }

        .carousel-inner {
            width: 100%;
            height: 100%;
        }

        .animate {
            margin-top: -200px;
            width: 100%;
            height: 200px;
            position: relative;
            z-index: 99999;
            text-align: center;
            line-height: 200px;
            display: none;
        }

        .row {
            height: 70px;
            line-height: 70px;
            padding-top: 15px;
            text-align: center;
        }
        #c_left{
            width: 15%;
            height: 100%;
            background-color: #2b333b;
            clear: both;
            float: left;
        }
        #c_right{
            width: 85%;
            height: 100%;
            float: left;
        }
        #menu{
            list-style: none;
            height: 60%;
            border-radius: 10px;
            font-size: 20px;
        }
        #menu li{
            width: 100%;
            margin-top: 30px;
            text-align: center;
        }
        #menu li:hover{
            background-color: #f8f8f8;
            font-size: 25px;
        }
        #menu li a{
            text-decoration: none;
            color: #ffffff;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="header-left">
        <a href="/" class="gallery-title"><img class="logo" src="/images/logo.png" height="45"
                                               width="60"/><span class="gallery-text">余晖画廊™</span></a>
    </div>

    <div class="header-center">
        <div class="row">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." id="search">
                <span class="input-group-addon btn btn-primary" id="basic-addon2">
  						<span class="glyphicon glyphicon-zoom-in" id="search">Search</span>
  				</span>
            </div>
        </div>
    </div>
    <div class="header-right">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span> <span class="caret"></span>
            </button>
        ${(Session.current_user.name)!}
            <ul class="dropdown-menu">
                <li><a href="/">首页</a></li>
                <li><a href="/send/gallery">画廊中心</a></li>
                <li><a href="/send/user/my_gallery">我的画廊</a></li>
                <li role="separator" class="divider"></li>
            <#if (Session.current_user)! != "">
                <li><a href="#">个人中心</a></li>
                <li><a href="#">用户注销</a></li>
            <#else>
                <li><a href="/send/login">用户登陆</a></li>
                <li><a href="/send/register">用户注册</a></li>
            </#if>
            </ul>
        </div>
    </div>
</div>
<div id="container">
    <div id="c_left">
        <ul id="menu">
            <li><a href="#" class="gallery" value="gallery_info">我的画廊</a></li>
            <li><a href="#" class="gallery" value="gallery_new">创建画廊</a></li>
            <li><a href="#">编辑画廊</a></li>
            <li><a href="#">1111111</a></li>
            <li><a href="#">1111111</a></li>
            <li><a href="#">1111111</a></li>
        </ul>
    </div>
    <div id="c_right" style="padding: 20px">
        <div type="gallery" value="gallery_info">
            <#include "/user/gallery_info.ftl"/>
        </div>
        <div type="gallery" value="gallery_new" style="display: none;">
            <#include "/user/gallery_new.ftl"/>
        </div>
    </div>
</div>
<#include "/public/footer.ftl">

<script>

    $('.carousel').carousel({
        interval: 2000
    });

    $(function () {
        $(".gallery").click(function () {
            var type=$(this).attr("value");
            $("div[type='gallery']").each(function () {
               if($(this).attr("value")==type) {
                   $(this).show();
               }else{
                   $(this).hide();
               }
            });
        });
    });

    function ss(s) {
        $(s).animate({
            top: "-=10px"
        });
        var a = s.getElementsByClassName("animate");
        $(a).show()
        $(a).animate({
            fontSize: "25px"
        });

    }
    function sx(s) {
        $(s).animate({
            top: "+=10px"
        });
        var a = s.getElementsByClassName("animate");
        $(a).animate({
            fontSize: "10px"
        });
        $(a).hide()
    }
</script>